<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 按钮基础样式设置 */
        button {
            margin-left: 40%;
            background: rgb(80, 123, 233); /* 设置按钮背景色为蓝色 */
            padding: 20px 30px; /* 设置按钮内边距，上下20px，左右30px */
            font-size: 18px; /* 设置按钮文字大小 */
            color: white; /* 设置按钮文字颜色为白色 */
            border-radius: 15px 0; /* 设置按钮圆角，左上角15px，其他角为0 */
            position: relative; /* 设置相对定位，为伪元素定位做准备 */
            border: none; /* 去除默认边框 */
            transform: skew(-20deg); /* 将按钮整体向左倾斜20度，实现平行四边形效果 */
        }

        /* 按钮内部文字样式调整 */
        button span {
            display: block; /* 将span设置为块级元素 */
            transform: skew(20deg); /* 文字向右倾斜20度，抵消按钮的倾斜效果，保持文字正常显示 */
        }
        
        /* 使用伪元素before创建左下角的圆角效果 */
        button::before {
            content: ""; /* 创建内容为空的伪元素 */
            position: absolute; /* 绝对定位 */
            height: 20px; /* 设置高度 */
            width: 20px; /* 设置宽度 */

            bottom: 0; /* 定位到按钮底部 */
            left: -19px; /* 向左偏移，覆盖按钮左下角 */
            /* 使用径向渐变创建圆角效果 */
            background: radial-gradient(circle at 0 0, /* 以左上角为圆心绘制圆形 */
                    transparent 20px, /* 在半径为20px内透明 */
                    /* 绿色区域到 5px */
                    rgb(80, 123, 233) 21px /* 从21px开始填充按钮背景色 */
                    /* 从 5px 到 10px 渐变到 rgb(80, 123, 233) */
                );

        }

        /* 使用伪元素after创建右上角的圆角效果 */
        button::after {
            content: ""; /* 创建内容为空的伪元素 */
            position: absolute; /* 绝对定位 */
            height: 20px; /* 设置高度 */
            width: 20px; /* 设置宽度 */

            top: 0; /* 定位到按钮顶部 */
            right: -19px; /* 向右偏移，覆盖按钮右上角 */
            /* 使用径向渐变创建圆角效果 */
            background: radial-gradient(circle at 100% 100%, /* 以右下角为圆心绘制圆形 */
                    transparent 20px, /* 在半径为20px内透明 */
                    /* 绿色区域到 5px */
                    rgb(80, 123, 233) 21px /* 从21px开始填充按钮背景色 */
                    /* 从 5px 到 10px 渐变到 rgb(80, 123, 233) */
                );

        }
    </style>
</head>

<body>
    <button><span>倾斜圆角</span></button>
</body>

</html>